<template>
    <!-- <van-pull-refresh v-model="isLoading"> -->
        <div class="homes">
            <!-- 轮播图 -->
            <div v-cloak>
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="getBanners in getBannerList" :key="getBanners.index">
                        <img :src="getBanners" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 活动 -->
            <div class="flex activity">
                <div class="activity-l">
                    <router-link :to="{name:'luckDraw'}" class="luckDraw">
                        <div class="flex link-l">
                            <div class="link-lt">
                                <div class="link-lt-big">FBP权益</div>
                                <div class="link-lt-small">每周福利</div>
                            </div>
                            <div class="fl iconb">
                                <van-icon name="balance-o"></van-icon>
                            </div>
                        </div>
                    </router-link>
                </div>
                <div class="activity-r">
                    <router-link to="/experiencesGold" class="experiencesGold">
                        <div class="flex link-l">
                            <div class="link-lt">
                                <div class="link-lt-big">1BTC秒到账</div>
                                <div class="link-lt-small">体验高息稳定收益</div>
                            </div>
                            <div class="fl iconb">
                                <van-icon name="chart-trending-o"></van-icon>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 卡片 -->
            <div v-cloak>
                <van-swipe :show-indicators="false" :loop="false">
                    <van-swipe-item v-for="coinPlanShow in coinPlanShows" :key="coinPlanShow.index">
                        <div class="car-box clearfix">
                            <div class="fl tag clearfix">
                                <van-tag plain color="#f2826a" size="medium">{{coinPlanShow.virtualWalletName}}</van-tag>
                            </div>
                            <div class="fl bonus-box clearfix">
                                <div class="flex bonus">
                                    <div class="bonus-items">
                                        <div class="big-num">{{coinPlanShow.listCoinPlan[0].annualInterestRate*1000}}<span>%</span></div>
                                        <div class="expect">预期年化利率</div>
                                    </div>
                                    <div class="bonus-items bonus-items-two">
                                        <div class="big-num">{{coinPlanShow.listCoinPlan[0].lockedDays}}<span>天</span></div>
                                        <div class="expect">锁定期</div>
                                    </div>
                                </div>
                            </div>
                            <van-button type="warning" block class="btn">体验</van-button>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 如何获取收益 -->
            <div class="profit">
                <div class="profit-title">如何获取收益</div>
                <div class="flex profit-list">
                    <div class="profit-item">
                        <div class="profit-icons">
                            <van-icon name="gem-o"></van-icon>
                        </div>
                        <div class="profit-text">量化套利</div>
                    </div>
                    <div class="profit-item">
                        <div class="profit-icons">
                            <van-icon name="point-gift-o"></van-icon>
                        </div>
                        <div class="profit-text">抵押借贷</div>
                    </div>
                    <div class="profit-item">
                        <div class="profit-icons">
                            <van-icon name="fire-o"></van-icon>
                        </div>
                        <div class="profit-text">矿机矿池</div>
                    </div>
                    <div class="profit-item">
                        <div class="profit-icons">
                            <van-icon name="ellipsis"></van-icon>
                        </div>
                        <div class="profit-text">持续扩展</div>
                    </div>
                </div>
            </div>
            <!-- 我们的优势 -->
            <div class="advantage">
                <div class="advantage-title">我们的优势</div>
                <div class="advantage-list">
                    <div class="advantage-item">
                        <div class="advantage-icon">
                            <van-icon name="shop-o"></van-icon>
                        </div>
                        <div class="advantage-con">
                            <p class="title">资金安全</p>
                            <p class="cont">冷热分离存储，HSM银行级安全防护，第三方专业机构托管</p>
                        </div>
                    </div>
                    <div class="advantage-item">
                        <div class="advantage-icon">
                            <van-icon name="shop-collect-o"></van-icon>
                        </div>
                        <div class="advantage-con">
                            <p class="title">优选资产</p>
                            <p class="cont">1年以上底层资产，平台自由资金实测，持续追踪评级</p>
                        </div>
                    </div>
                    <div class="advantage-item">
                        <div class="advantage-icon">
                            <van-icon name="bookmark-o"></van-icon>
                        </div>
                        <div class="advantage-con">
                            <p class="title">投资保障</p>
                            <p class="cont">承诺5%管理规模备付准备金，首期为52BTC</p>
                        </div>
                    </div>
                    <div class="advantage-item">
                        <div class="advantage-icon">
                            <van-icon name="balance-list-o"></van-icon>
                        </div>
                        <div class="advantage-con">
                            <p class="title">风险控制</p>
                            <p class="cont">全平台风控引擎，风险自动预警，团队7/24h待命</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- </van-pull-refresh> -->
</template>
<script>
import {
    Swipe,
    SwipeItem,
    Row,
    Col,
    Tag,
    Button,
    Icon,
    PullRefresh,
    List
} from 'vant'
import vue from 'vue'
import axios from 'axios'
import {
    getBanner,
    coinPlanShow
} from '../../axios/api.js'
export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tag.name]: Tag,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [PullRefresh.name]: PullRefresh,
        [List.name]: List
    },
    data() {
        return {
            isLoading: false,
            getBannerList: [],
            coinPlanShows: [],
            data: {
                page: "1",
                rows: "5"
            }
        }
    },
    created() {
        getBanner({
            params: this.data
        }).then(res => {
            console.log(res.data.data)
            this.getBannerList = res.data.data;
        });
        coinPlanShow().then(res => {
            this.coinPlanShows = res.data.data;
        })
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/variable.less";
// 修改swiper dot默认样式
/deep/ .van-swipe__indicator {
    border-radius: 0;
    width: 20px;
    height: 4px;
    background-color: rgb(0, 0, 0);
    opacity: .1;
}
/deep/ .van-swipe__indicator:not(:last-child) {
    margin-right: 0;
}
/deep/ .van-swipe__indicator--active {
    opacity: .5;
    background-color: black;
}
[v-cloak] {
    display: none;
}
.homes {
    height: 100%;
    margin-bottom: 70px;
    background: @base_background;
    overflow: hidden;
    .van-swipe {
        touch-action: none;
        img {
            width: 100%;
            height: 5.33rem;
            display: block;
        }
    }
    .activity {
        width: 100%;
        height: 2rem;
        margin: 10px 0;
        .activity-l, .activity-r {
            width: 50%;
            .link-l {
                width: 100%;
                .link-lt {
                    margin-right: 10px;
                    line-height: 1.5;
                    .link-lt-big {
                        font-size: @base_textSize;
                        color: @base_textColor;
                    }
                    .link-lt-small {
                        font-size: 12px;
                        color:#969799f5;
                    }
                }
                .iconb {
                    font-size: 3em;
                    color: #ff976a;
                }
            }
        }
    }
    .car-box {
        width: 60%;
        height: auto;
        margin: 10px auto;
        border-radius: 3px;
        box-shadow: 0 0 6px 2px #ebedf0;
        padding: 10px 10px 20px 10px;
        .tag {
            width: 100%;
            text-align: left;
        }
        .bonus-box {
            width: 100%;
            margin: .27rem 0;
            .bonus {
                width: 100%;
                .bonus-items {
                    width: 100%;
                    div {
                        width: 50%;
                    }
                    .big-num {
                        width: 100%;
                        font-size: 3em;
                        color: #f2826a;
                        span {
                            font-size: .6em;
                        }
                    }
                    .expect {
                        width: 100%;
                        font-size: 12px;
                        color: #969799f5;
                    }
                }
                .bonus-items-two {
                    .big-num {
                        color: @base_textColor;
                    }
                }
            }
        }
    }
    .profit {
        width: 100%;
        margin: 10px 0;
        .profit-title {
            padding: 10px 0;
            font-size: @base_textSize;
            color: @base_textColor;
        }
        .profit-list {
            padding: 10px 0;
            .profit-item {
                width: 25%;
                .profit-icons {
                    font-size: 3em;
                    color: #ff976a;
                }
                .profit-text {
                    font-size: @base_textSize;
                    color: @base_textColor;
                }
            }
        }
    }
    .advantage {
        width: 100%;
        margin-top: 10px;
        .advantage-title {
            padding: 10px 0;
            font-size: @base_textSize;
            color: @base_textColor;
        }
        .advantage-list {
            padding: 10px 15px;
            .advantage-item:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }
            .advantage-item {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 10px 0;
                border-bottom: @base_boder;
                .advantage-icon{
                    width: 10%;
                    margin-right: 10px;
                    font-size: 3em;
                    color: #ff976a;
                    i {
                        vertical-align: super;
                    }
                }
                .advantage-con {
                    width: 90%;
                    .title {
                        text-align: left;
                        font-size: 14px;
                        font-weight: bold;
                        color: #323233;
                    }
                    .cont {
                        text-align: left;
                        font-size: 12px;
                        color: #323233;
                        margin: 5px 0;
                    }
                }
            }
        }
    }
}
</style>

